<template>
  <div class="app-container">
    <!-- 搜索和添加 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="TelMap.data.name" placeholder="模板名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          @click="
            dialogFormVisible = true;
            entity = {};
            listBrand = [];
            listSpec = [];
          "
          >添加</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" icon="el-icon-delete" @click="BatchTemplate"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 表单显示商品模板列表 -->
    <el-table :data="telList" border style="width: 100%" ref="multipleTable">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="模板ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="模板名称" width="180">
      </el-table-column>
      <el-table-column label="品牌名称">
        <template slot-scope="scope">
          <span>{{ scope.row.brands | templateFormat("name") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板名称" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.spec | templateFormat("specName") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板操作">
        <template slot-scope="scope">
          <div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="
                updateTemplate(scope.row);
                dialogFormVisible = true;
              "
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[3, 4, 5, 6]"
      :page-size="TelMap.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加获取修改模板信息 -->
    <el-dialog
      :title="entity.id ? '修改模板' : '添加模板'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="entity"
        ref="templatevali"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="entity.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关联品牌" prop="listBrand">
          <el-select v-model="listBrand" multiple placeholder="请选择">
            <el-option
              v-for="item in selectBrand"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联规格">
          <el-select v-model="listSpec" multiple placeholder="请选择">
            <el-option
              v-for="item in selectSpec"
              :key="item.id"
              :label="item.specName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogFormVisible = false;
            search();
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="save('templatevali')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  templateSearch,
  templatesava,
  batchIds,
  listBrand,
  listSpec,
} from "@/api/template";
export default {
  data() {
    return {
      dialogFormVisible: false,
      total: 0,
      entity: {
        brands: {},
        spec: {},
      },
      listBrand: [],
      listSpec: [],
      selectSpec: [],
      selectBrand: [],
      telList: [],
      TelMap: {
        page: 1,
        limit: 3,
        data: {},
      },
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
        brand: [{ required: true, message: "请选择品牌名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 保存模板信息
    save(templatevali) {
      this.$refs[templatevali].validate((valid) => {
        if (valid) {
          let brands = [];
          let specs = [];
          this.listBrand.forEach((item, i) => {
            this.selectBrand.forEach((brand, index) => {
              if (item == brand.id) {
                brands.push({ id: brand.id, name: brand.name });
              }
            });
          });
          this.listSpec.forEach((item, i) => {
            this.selectSpec.forEach((sp, index) => {
              if (item == sp.id) {
                specs.push({ id: sp.id, specName: sp.specName });
              }
            });
          });
          this.entity.brands = JSON.stringify(brands);
          this.entity.spec = JSON.stringify(specs);
          // console.log(this.entity)
          templatesava(this.entity).then((res) => {
            this.$message({
              message: res.message,
              type: res.success ? "success" : "warning",
            });
            this.dialogFormVisible = false;
            this.search();
          });
        } else {
          this.$message({
            message: "请按照要求输入",
            type: "warning",
          });
          return false;
        }
      });
    },
    // 修改模板信息
    updateTemplate(tel) {
      this.listBrand = [];
      this.listSpec = [];
      this.entity = tel;
      let brand = eval(tel.brands);
      brand.forEach((item) => {
        this.listBrand.push(item.id);
      });
      let spec = eval(tel.spec);
      spec.forEach((item) => {
        this.listSpec.push(item.id);
      });
    },
    // 批量删除
    BatchTemplate() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let selectData = this.$refs.multipleTable.selection;
        let ids = [];
        selectData.forEach((item) => {
          ids.push(item.id);
        });
        batchIds(ids).then((res) => {
          this.$message({
            message: res.message,
            type: res.success ? "success" : "warning",
          });
          this.dialogFormVisible = false;
          this.search();
        });
      });
    },
    // s删除模板选项
    delspec(index) {
      this.entity.options.splice(index, 1);
    },
    // 新添模板选项
    addSpec() {
      this.entity.options.push({});
    },
    // limit改变
    handleSizeChange(val) {
      this.TelMap.limit = val;
      this.search();
    },
    // 当前页面改变
    handleCurrentChange(val) {
      this.TelMap.page = val;
      this.search();
    },
    // 删除模板信息
    delSpec(id) {
      // console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delSepcById(id).then((res) => {
          this.$message({
            message: res.message,
            type: res.success ? "success" : "warning",
          });
          this.search();
        });
      });
    },
    // 搜索模板
    search() {
      let _this = this;
      templateSearch(this.TelMap).then((res) => {
        // console.log(res);
        _this.telList = res.data;
        _this.total = res.total;
      });
    },
    // 获取品牌信息和规格信息
    gainBrandAndSpec() {
      listBrand().then((res) => {
        this.selectBrand = res;
      });
      listSpec().then((res) => {
        this.selectSpec = res;
      });
    },
  },
  created() {
    this.search();
    this.gainBrandAndSpec();
  },
  filters: {
    templateFormat(sourse, mat) {
      let tem = eval(sourse);
      let temforomat = [];
      tem.forEach((item) => {
        temforomat.push(item[mat]);
      });
      // console.log(temforomat)
      return temforomat.join(",");
    },
  },
};
</script>